import React from 'react';
import { Row, Col, Tree, Select, Button } from 'antd';
import _ from 'lodash';

const { TreeNode } = Tree;
const { Option } = Select;

const treeData = [
  {
    title: '0-0',
    key: '0-0',
    children: [
      {
        title: '0-0-0',
        key: '0-0-0',
        children: [
          { title: '0-0-0-0', key: '0-0-0-0' },
          { title: '0-0-0-1', key: '0-0-0-1' },
          { title: '0-0-0-2', key: '0-0-0-2' },
        ],
      },
      {
        title: '0-0-1',
        key: '0-0-1',
        children: [
          { title: '0-0-1-0', key: '0-0-1-0' },
          { title: '0-0-1-1', key: '0-0-1-1' },
          { title: '0-0-1-2', key: '0-0-1-2' },
        ],
      },
      {
        title: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    title: '0-1',
    key: '0-1',
    children: [
      { title: '0-1-0-0', key: '0-1-0-0' },
      { title: '0-1-0-1', key: '0-1-0-1' },
      { title: '0-1-0-2', key: '0-1-0-2' },
    ],
  },
  {
    title: '0-2',
    key: '0-2',
  },
];

export default class TreeDemo extends React.Component {
  state = {
    dataList: [],
    expandedKeys: [],
    autoExpandParent: true,
    checkedKeys: [],
    selectedKeys: [],
  };

  // 页面初始化,整合初始化数据
  UNSAFE_componentWillMount() {
    const { dataList } = this.state;
    this.handleMerge(treeData);
  }

  // 初始化数据的逻辑
  handleMerge = (data) => {
    const { dataList } = this.state;
    data.map((item) => {
      if (item.children) {
        this.handleMerge(item.children);
      } else {
        let num = _.findIndex(dataList, function (o) {
          return o.key == item.key;
        });
        dataList.splice(num >= 0 ? num : dataList.length, num >= 0 ? num : 0, {
          key: item.key,
          value: '11',
        });
        this.setState({ dataList });
      }
    });
  };

  // 展开/收起节点时触发
  onExpand = (expandedKeys) => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  };

  // 点击复选框触发
  onCheck = (checkedKeys) => {
    this.setState({ checkedKeys });
  };

  // 点击树节点触发
  onSelect = (selectedKeys, info) => {
    this.setState({ selectedKeys });
  };

  // 生成树形结构dom
  renderTreeNodes = (data) => {
    const { dataList } = this.state;
    return data.map((item) => {
      let num = _.findIndex(dataList, function (o) {
        return o.key == item.key;
      });
      let onChange = (value) => {
        dataList.splice(num >= 0 ? num : dataList.length, num >= 0 ? num : 0, {
          key: item.key,
          value: value,
        });
        this.setState({ dataList });
      };
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return (
        <TreeNode
          title={
            <span>
              {item.title}
              <Select style={{ width: '120px', marginLeft: '8px' }} size='small' onChange={onChange} defaultValue={item.value || '11'}>
                <Option key='11'>11</Option>
                <Option key='22'>22</Option>
              </Select>
            </span>
          }
          key={item.key}
        />
      );
    });
  };

  // 发送数据
  handleSubmit = (e) => {
    e ? e.preventDefault() : '';
    const { checkedKeys, dataList } = this.state;
    const data = dataList.filter((item) => {
      return checkedKeys.some((val) => val === item.key);
    });
  };

  render() {
    const { dataList } = this.state;
    return (
      <div>
        <Tree
          checkable
          onExpand={this.onExpand}
          expandedKeys={this.state.expandedKeys}
          autoExpandParent={this.state.autoExpandParent}
          onCheck={this.onCheck}
          checkedKeys={this.state.checkedKeys}
          onSelect={this.onSelect}
          selectedKeys={this.state.selectedKeys}
        >
          {this.renderTreeNodes(treeData)}
        </Tree>
        <Button type='primary' onClick={this.handleSubmit}>
          发送
        </Button>
      </div>
    );
  }
}
